import { useFlowStore } from '../stores/flowStore';

export const RuntimeInfoPanel = () => {
  const nodes = useFlowStore(state => state.nodes);
  const connections = useFlowStore(state => state.connections);
  
  // 收集所有有输出的节点信息
  const runtimeInfo = nodes
    .filter(node => node.outputs !== undefined)
    .map(node => ({
      id: node.id,
      functionId: node.functionId,
      outputs: node.outputs,
      status: node.status
    }));

  return (
    <div className="runtime-info-panel">
      <h3>运行时信息</h3>
      <div className="info-content">
        {runtimeInfo.length === 0 ? (
          <div className="empty-message">暂无运行时数据</div>
        ) : (
          <ul className="runtime-list">
            {runtimeInfo.map(info => (
              <li key={info.id} className={`runtime-item ${info.status}`}>
                <div className="function-id">{info.functionId}</div>
                <div className="output-value">
                  {JSON.stringify(info.outputs, null, 2)}
                </div>
                <div className="status-indicator">{info.status}</div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
};